<template id='InviteShare'>
  <div class="InviteShare">
    <div class="pc"></div>
    <div class="phone">
      <!-- <div class="phoneContent">
        <div class="phoneInviteCode">
          <vue-qr :text="baseURL" :size="200"></vue-qr>
        </div>
      </div> -->
      <div class="canvasPath">
        <img :src="resultCanvas" id="resultCanvas" />
        <div class="canvasInviteCode" v-show="1 == 2">
          <vue-qr :text="baseURL" :size="200" id="qrCode"></vue-qr>
        </div>
        <canvas class="canvas" id="canvas" width="690" height="1222" v-show="1 == 2"></canvas>
      </div>
      <div class="phoneBottomBtn" @click="savePicture">长按保存图片</div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import vueQr from "vue-qr";
export default {
  name: "InviteShare",
  components: { vueQr },
  // 定义属性
  data() {
    return {
      baseURL: "",
      // baseURL: "http://192.168.10.5:8080",
      resultCanvas: "",
      isShowCanvas: false,
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    savePicture() { },
    mixPhoto() {
      let that = this;
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      let bgImage = new Image();
      bgImage.setAttribute("crossOrigin", "anonymous");
      let qrImage = document.getElementById("qrCode");
      let resultImage = document.getElementById("resultCanvas");
      bgImage.src = require("@/assets/images/invite/phoneShareBg.png");
      bgImage.onload = () => {
        ctx.drawImage(bgImage, 0, 0);

        ctx.drawImage(qrImage, 450, 986);

        resultImage.src = canvas.toDataURL("image/jpeg");
      };
    },
    getBaseUrl() {
      let url = window.location.href;
      if (url.indexOf("?code=") !== -1) {
        this.baseURL = window.location.href.split("?code=")[0];
      } else if (url.indexOf("?merchantId=") !== -1) {
        this.baseURL = window.location.href.split("?merchantId=")[0];
      } else {
        this.baseURL = window.location.href.split("#")[0];
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getBaseUrl();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.$route.query.inviteCode) {
      this.baseURL =
        this.baseURL + "#/?inviteCode=" + this.$route.query.inviteCode;
    } else if (this.$route.query.onebuy_code) {
      this.baseURL =
        this.baseURL + "#/?onebuy_code=" + this.$route.query.onebuy_code + "&id=" + this.$route.query.goods_id;
    }

    this.$nextTick(() => {
      this.mixPhoto();
    });
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.InviteShare {
  p {
    margin: 0;
  }

  .pc {}

  .phone {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .InviteShare {
    .pc {
      display: none;
    }

    .phone {
      display: block;
      padding: 0 30px;
      background: #1e2020;
      padding-top: 130px;
      position: relative;

      .phoneContent {
        background: url("~@/assets/images/invite/phoneShareBg.png");
        background-size: 100% 100%;
        width: 100%;
        height: 1226px;
        position: relative;

        .phoneInviteCode {
          position: absolute;
          bottom: 40px;
          right: 40px;
          width: 210px;
          height: 210px;
        }
      }

      .phoneBottomBtn {
        margin: 72px 0;
        width: 100%;
        height: 100px;
        background: url("~@/assets/images/invite/phoneLongBtn.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
      }

      .canvasPath {
        #resultCanvas {
          -webkit-touch-callout: default;
        }

        .canvasInviteCode {
          width: 210px;
          height: 210px;
        }
      }
    }
  }
}
</style>